<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '添加',
  },
}
</route>

<template>
  <view class="pt-4">
    <view class="px-4">
      <wd-input type="text" v-model="value" placeholder="请输入标题" @change="handleChange" />
    </view>

    <wd-textarea v-model="value1" placeholder="请填写内容" />
    <view class="px-4">
      <wd-upload
        :file-list="fileList"
        image-mode="aspectFill"
        :action="action"
        @change="handleChange1"
      ></wd-upload>
    </view>
    <wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
    <wd-cell-group>
      <wd-cell title="困难等级" center>
        <wd-button custom-class="custom-value" @click="showActions" size="small">等级</wd-button>
      </wd-cell>
      <wd-cell title="骑行城市" center>
        <wd-button custom-class="custom-value" @click="showActions" size="small">城市</wd-button>
      </wd-cell>
      <wd-cell title="帖子类别" center>
        <wd-button custom-class="custom-value" @click="showActions" size="small">类别</wd-button>
      </wd-cell>
    </wd-cell-group>
  </view>
</template>

<script lang="ts" setup>
//
const value = ref<string>('')
function handleChange1(event) {
  console.log(event)
}
const value1 = ref<string>('')

const fileList = ref<any[]>([])

const action: string =
  'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'

function handleChange({ fileList: files }) {
  fileList.value = files
}
function select() {}
const show = ref<boolean>(false)
const actions = ref([
  {
    name: '选项1',
  },
  {
    name: '选项2',
  },
  {
    name: '选项3',
    subname: '描述信息',
  },
])

function showActions() {
  show.value = true
}
function close() {
  show.value = false
}
</script>

<style lang="scss" scoped>
//
</style>
